<template>
    <div class="container">

        <van-sticky>
            <van-nav-bar title="种草分享" />
        </van-sticky>

        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 加载列表 -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="box">
                    <div class="item" v-for="item in list" :key="item.id">
                        <div class="top">
                            <div class="avatar">
                                <div class="image">
                                    <img :src="item.business.avatar_cdn" style="height: 50px;object-fit: cover;" />
                                </div>
                                <div class="name">{{ item.business.nickname }}</div>
                            </div>
                            <div class="follow">
                                <van-button type="primary" icon="plus" size="small" color="#7232dd"
                                    class="follow-button">关注</van-button>
                            </div>
                        </div>

                        <div class="title">
                            {{ item.content }}
                        </div>

                        <div class="thumbs">
                            <div class="image" v-for="(imgs,key) in item.url_cdn">
                                <van-image :src="imgs" fit="cover" :key="key"
                                @click="showImage(item,key)" 
                                />
                            </div>

                        </div>
                        <router-link :to="{
                            path: '/product/info',
                            query: { proid: item.product.id },
                        }">
                            <div class="product">
                                <div class="left">
                                    <van-image fit="cover" :src="item.product.thumbs_cdn" />
                                </div>
                                <div class="right">
                                    <div class="name">
                                        {{ item.product.name }}
                                    </div>
                                    <div class="price">￥{{ item.product.price }}</div>
                                </div>
                            </div>
                        </router-link>

                        <div class="action">
                            <div class="left">{{ item.createtime_date }}</div>
                            <div class="right">
                                <div class="item">
                                    <van-icon name="like-o" />
                                    <span>{{ item.likes_count }}</span>
                                </div>
                                <div class="item">
                                    <van-icon name="chat-o" />
                                    <span>179</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 返回顶部 -->
                <van-back-top />
            </van-list>
        </van-pull-refresh>
    </div>

    <Tabbar />
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$business;

const refreshing = ref(false); // 刷新状态
const loading = ref(false); // 懒加载状态
const finished = ref(false); // 是否加载完成状态
const list = ref([]);
const page = ref(1);
// 下拉刷新事件
const onRefresh = () => {
    refreshing.value = true;
    loading.value = true;
    finished.value = false;
    page.value = 1;
    list.value = [];

    setTimeout(onLoad, 1500);
};

const showImage = (item,key) => {
    
    console.log("🚀 ~ showImage ~ item:",item)
    
    proxy.$showImage({
        images: 
            item.url_cdn
        ,
        startPosition:key  ,
        onClose() {
        },
    });
}

// 上拉加载事件
const onLoad = async () => {
    if (refreshing.value) {
        refreshing.value = false;
    }

    let params = {

        page: page.value,
        // search: Search.value,
    };

    let result = await proxy.$http.post({
        url: '/share/index',
        params
    })


    finished.value = false;
    loading.value = false;

    if (result.code === 1) {
        let count = result.data.count ?? 0;
        list.value = list.value.concat(result.data.list);

        if (list.value.length >= count) {
            finished.value = true;

            return false;
        }

        page.value += 1;
    } else {
        finished.value = true;
        proxy.$warning(result.msg);
    }
};


</script>

<style scoped>
@import url("/assets/css/share.css");

.van-image {
    height: 100%;
    width: 100%;
}

.left img {}

.box>.item>.top>.avatar>.image {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;

}

.box>.item .product .left {
    text-align: center;
    width: 20%;
    border-radius: 9px;
    margin-right: 2%;
    flex-shrink: 0;
}

.box>.item>.top>.follow {
    width: 20%;
}


.product :deep(*) {
    max-height: 60px;
}

.thumbs :deep(*) {
    max-height: 80px;
}

/* 小屏幕（平板） */
@media (min-width: 768px) {
    .thumbs :deep(*) {
        max-height: 120px;
    }
}

/* 中等屏幕（笔记本/小型桌面显示器） */
@media (min-width: 992px) {
    .thumbs :deep(*) {
        max-height: 160px;
    }
}

/* 大屏幕（大型桌面显示器） */
@media (min-width: 1200px) {
    .product :deep(*) {
        max-height: 100px;
    }

    .thumbs :deep(*) {
        max-height: 200px;
    }
}
</style>
